<template>
    <div class="container">
        <div class="title">设备统计</div>

        <div class="div_box">
            <div class="item">
                <div>设备总数</div>
                <div class="count" style="cursor: pointer;" @click="toDevice">
                    <span><countTo :startVal='0' :endVal='sum' :duration='3000'></countTo></span>
                </div>
            </div>
            <div class="item">
                <div>在线</div>
                <div class="count ">
                    <span  ><countTo :startVal='0' :endVal='count1' :duration='3000' style="color: #00F8D8;"></countTo></span>
                </div>
            </div>
            <div class="item">
                <div>离线</div>
                <div class="count ">
                    <span  > <countTo :startVal='0' :endVal='count2' :duration='3000' style="color: #90a4ae;"></countTo></span>
                </div>
            </div>
            <div class="item">
                <div>告警</div>
                <div class="count ">
                    <span  ><countTo :startVal='0' :endVal='count3' :duration='3000' style="color: rgb(241, 42, 42);"></countTo></span>
                </div>
            </div>

            <div class="item">
                <div>今日新增</div>
                <div class="count ">
                    <span  ><countTo :startVal='0' :endVal='todayalarmcount' :duration='3000' style="color: #FEC300;"></countTo></span>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { reqDeviceCount,reqTodayAlarmCount } from "@api/apiDatav.js";
import { mapState } from "vuex";
import countTo from 'vue-count-to';

export default {
    components: {countTo},
    data() {
        return {
            count1: 0,
            count2: 0,
            count3:0,
            sum: 0,
            todayalarmcount:0,
        };
    },
    computed: {
        ...mapState(["user","datav"]),
    },
    watch: {},
    methods: {
        toDevice(){
            // this.$router.replace("/device/list")
            this.$router.replace({ name: 'deviceList', params: { orgId: this.datav.orgarr.id ,orgName:this.datav.orgarr.orgName} });
        },
        async getTodayAlarmCount(){
            let res = await reqTodayAlarmCount({
                tenantId: this.user.tenantId,
                orgId:this.datav.orgarr.id,
                type:1,
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.todayalarmcount=res.data.row.todayCount||0;
        },
        async getDeviceCount() {
            let res = await reqDeviceCount({
                tenantId: this.user.tenantId,
                orgId: this.datav.orgarr.id,
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // if(res.data.row.length==0) {
            //     this.count1 = 0;
            //     this.count2 =0;
            //     this.count3=0;
            //     this.sum =0;
            //     return;
            // }
            this.count1 = 0;
                this.count2 =0;
                this.count3=0;
                this.sum =0;
            res.data.row.forEach((result) => {
                if (result.online == 1) {
                    this.count1 = result.count ? result.count : 0;
                } else if(result.online==0){
                this.count2=result.count?result.count:0
                }else if(result.online==2){
                this.count3=result.count?result.count:0
                }
                this.sum = this.count1 + this.count2; //总数
            });
            this.getTodayAlarmCount()
        },
    },
    created() {
    },
    mounted() { },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;
    display: inline-block;
    .fontSize(16);

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;
    }

    .div_box {
        // .height(85);
        height: 64%;
        .fontSize(13);
        color: #ccc;
        display: flex;
        padding: 5% 2% 0 2%;
        box-sizing: border-box;

        .item {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            align-items: center;
            >div:first-of-type{
                color: #8EA4E9;
            }
            
            .count {
                // color: #8777FF;
                .marginTop(20);

                span {
                    .fontSize(22);
                    color: #03E3EE;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>
